<template>
  <div class="content">
    <!-- 公告 -->
    <el-card class="box-card">
     <div slot="header" class="clearfix">
       <span>公告</span>
       <el-button style="float: right; padding: 3px 0" type="text"><router-link to="/announace">更多</router-link></el-button>
      </div>
       <div v-for="notice in notices.slice(0,5)" :key="notice.id" class="text item">
        <router-link :to="{ name: 'AnnDetail', params: { id: notice.id } }">{{ notice.title }}</router-link>
       <span v-text="notice.time" class="time"></span>
       </div>
    </el-card>
    <hr/>
    <!-- 焦点讨论 -->
    <el-card class="box-card">
     <div slot="header" class="clearfix">
       <span>焦点讨论</span>
       <el-button style="float: right; padding: 3px 0" type="text"><router-link to="/comment">更多</router-link></el-button>
      </div>
       <div v-for="post in postList.slice(0,5)" :key="post.id" class="text item">
        <router-link :to="{ name: 'ComDetail', params: { id: post.id } }">{{ post.title }}</router-link>
       <span v-text="post.time" class="time"></span>
       </div>
    </el-card>
    <hr/>
  </div>
</template>

<script>
export default {
  data(){
    return{
      notices: [], // 公告列表
      postList: [], // 论坛列表
    }
  },
  created() {
    this.getNotices();
    this.getpostList();
  },
  methods: {
    // 获取公告列表
    getNotices() {
      this.request.get('/notice/part').then((response) => {
        const data = response.data
        console.log(data)
        this.notices = data.data.list
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取论坛列表
    getpostList() {
      // 调用后端接口获取数据
      this.request.get('/post/part').then((response) => {
        const data = response.data
        console.log(data)
        this.postList = data.data.list
      }).catch(error => {
        console.log(error)
      })
    },
  }
}
</script>

<style>
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .time{
   float:right;
  }
  .el-card{
    font-size: 100%;
  }
</style>